<template>
  <div class="search-container">
    <div class="search-bar">
      <input
        type="text"
        class="search-input"
        v-model="searchParmas.option"
        placeholder="Please enter an organism name or taxid, etc.

"
      />
      <div class="search-icon" @click="search">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          height="14"
          viewBox="0 0 24 24"
          width="14"
        >
          <path d="M0 0h24v24H0z" fill="none"></path>
          <path
            d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zM9.5 14C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
          ></path>
        </svg>
      </div>
    </div>
    <div class="glow"></div>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
import router from "@/router/index";
import { ElMessage } from "element-plus";
import { getHomeSearchData } from "@/api/search.js";
let searchParmas = ref({
  page: 1,
  pageSize: 10,
  option: "", // 搜索内容
});
const props = defineProps(["option"]);
watch(
  props,
  (newVal, oldVal) => {
    searchParmas.value.option = props.option;
  },
  {
    deep: true,
  }
);
// 搜索
const search = () => {
  if (!searchParmas.value.option == "") {
    getHomeSearchData(searchParmas.value).then((res) => {
      let routerType = "";
      switch (res.data.data) {
        case "viruses":
          routerType = "search_viruses";
          break;
        case "bacteria":
          routerType = "search_bacteria";
          break;
        case "fungi":
          routerType = "search_fungi";
          break;
        default:
          break;
      }
      router.push({
        name: routerType,
      });
      localStorage.setItem("searchData_status", JSON.stringify(true));
      localStorage.setItem("homeSearchType", JSON.stringify(res.data.data));
      localStorage.setItem("searchData", JSON.stringify(res.data.data2));
    });
  } else {
    ElMessage.warning(
      "Please enter the content you want to search for first!!!"
    );
  }
};
</script>
<style scoped lang="scss">
/* From Uiverse.io by themrsami */
.search-container {
  position: relative;
  width: 100%;
}

.search-bar {
  position: relative;
  display: flex;
  align-items: center;
  background-color: #396c99;
  border-radius: 8px;
  padding: 2px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.search-input {
  width: 100%;
  border: none;
  background: none;
  color: #fff;
  font-size: 15px;
  padding: 10px;
  outline: none;
}

.search-input::placeholder {
  color: #cecece;
}

.search-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background-color: #0c4270;
  border-radius: 50%;
  margin-left: 10px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.search-icon svg {
  fill: #fff;
}

.search-icon:hover {
  background-color: #1c2f58;
}

.search-bar:hover {
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}

.search-bar:focus-within {
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.4);
}

.glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 200%;
  border-radius: 100px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1), transparent);
  transition: all 0.5s ease;
  transform: translate(-50%, -50%) scale(0);
  z-index: -1;
}

.search-bar:hover + .glow {
  transform: translate(-50%, -50%) scale(1);
}

.search-bar:focus-within + .glow {
  transform: translate(-50%, -50%) scale(1.2);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.2), transparent);
}
</style>
